<template>
  <div class="statistics-data-main">
    <div class="nav-back-header">
      <div class="back-title">
        <div class="back-button">
          <img class="back-cover" src="@/assets/images/arrow-left.png" @click="onNavigationBack()"/>
        </div>
        <strong>数据统计</strong>
      </div>
      <img class="divider" src="@/assets/images/divider.png" />
      <el-select v-model="value" filterable size="mini">
        <el-option
          v-for="item in cities"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <div class="select-option-item">
            <span>{{ item.label }}</span>
            <i class="el-icon-circle-close icon-close" v-if="actived != item.value"></i>
          </div>
        </el-option>
        <div class="other-option">
          <a class="link">企业管理</a>
        </div>
      </el-select>
    </div>
    <div class="statistics-tabs-wrap">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="按群活码查看" name="first">
          <GroupTabale />
        </el-tab-pane>
        <el-tab-pane label="按日期查看" name="second">
          <DateTable />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import DateTable from './components/DateTable.vue';
import GroupTabale from './components/GroupTabale.vue';

export default {
  data() {
    return {
      actived: 0,
      activeName: 'first',
      cities: [{
        value: 0,
        label: '志新'
      }, {
        value: 1,
        label: '锐行'
      }]
    }
  },
  components: {
    DateTable,
    GroupTabale
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onNavigationBack(){
      this.$router.go(-1);
    }
  }
}
</script>
<style lang="scss" scoped>
.statistics-data-main {
  .nav-back-header {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 8;
    height: 46px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    .back-title {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 22px;
      .back-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-right: 12px;
        border: none;
        width: 24px;
        height: 24px;
        background: #4b5a95;
        border-radius: 12px;
        cursor: pointer;
        .back-cover {
          width: 16px;
          height: 16px;
        }
      }
    }
    .divider {
      margin: 0 20px;
      width: 1px;
      height: 16px;
    }
  }
  .statistics-tabs-wrap {
    overflow: auto;
    padding: 12px;
  }
}
</style>
<style>
.el-scrollbar .select-option-item {
  height: 34px;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-select-dropdown__item {
  padding: 0 10px;
}
.el-scrollbar .select-option-item:hover .icon-close {
  display: block;
}
.el-scrollbar .select-option-item .icon-close {
  display: none;
}
.el-scrollbar .other-option {
  padding: 0 8px;
  color: #2f54eb;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e9e9e9;
}
.el-scrollbar .other-option > .link {
  font-size: 14px;
}
.statistics-data-main .el-tabs__nav {
  position: relative;
  display: flex;
  transition: transform .3s;
}
.statistics-data-main .el-tabs__nav .el-tabs__item {
  background: #fafafa;
  border: 1px solid #e9e9e9;
  border-radius: 4px 4px 0 0;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(0,0,0,.65);
}
.statistics-data-main .el-tabs__nav .el-tabs__item:not(:first-child) {
  margin-left: 2px;
}
.statistics-data-main .el-tabs__nav .is-active {
  color: #3070ff;
  background: #fff;
}
.statistics-data-main .el-tabs__header {
  margin: 0;
}
</style>